import {Input, Button, Form } from 'antd-mobile'
import React, { useState } from 'react'
import HeaderNav from "@/components/header-nav"
import { EyeOutline, EyeInvisibleOutline } from 'antd-mobile-icons'
import styles from "./index.module.less"
const { getUpdatePwd } = $globalServicer('My')

import Cookies from 'js-cookie'
import {showSuccessToast, showErrorToast} from "@/utils/customToast.js";
const Login = () => {
  const [form] = Form.useForm();
  const [passWorldVisible, setPassWorldVisible] = useState(false);
  const [visible, setVisible] = useState(false);
  const [confirmPassWordVisible, setConfirmPassWordVisible] = useState(false);
  const [validationMessage, setValidationMessage] = useState('请填写完整信息以启用保存按钮。');
  const [isFormValid, setIsFormValid] = useState(false);
  // 验证表单
  const validateForm = () => {
    const values = form.getFieldsValue();
    const { old_pwd, new_pwd, confirm_new_pwd } = values;
    
    if (!old_pwd || !new_pwd || !confirm_new_pwd) {
      setValidationMessage('请填写完整信息以启用保存按钮。');
      setIsFormValid(false);
      return;
    }
    
    if (new_pwd.length < 8 || !/[A-Za-z]/.test(new_pwd) || !/\d/.test(new_pwd)) {
      setValidationMessage('新密码需至少8位且包含字母与数字。');
      setIsFormValid(false);
      return;
    }
    
    if (new_pwd !== confirm_new_pwd) {
      setValidationMessage('两次输入的新密码不一致。');
      setIsFormValid(false);
      return;
    }
    
    setValidationMessage('密码格式有效，可以保存。');
    setIsFormValid(true);
  };

  const onFinish = (values) => {
    console.log('Success:', values);
    if (values.new_pwd !== values.confirm_new_pwd) {
      showErrorToast(`两次密码不一致`)
      return
    }
    getUpdatePwd(values).then(res => {
      localStorage.clear()
      const allCookies = Cookies.get();
      console.log(`allCookies`, allCookies)
      // 遍历所有cookies并逐个删除
      for (const cookieName in allCookies) {
        Cookies.remove(cookieName);
      }
      showSuccessToast("修改成功");
      window.location.href = '/#/login'
    })
  }
  return (
    <div className={styles.accountPage}>
      <div className={styles.header}>
        <HeaderNav 
          title="修改密码" 
          backArrow={true}
        />
        <button 
          className={`${styles.saveButton} ${!isFormValid ? styles.disabled : ''}`}
          disabled={!isFormValid}
          onClick={() => form.submit()}
        >
          保存
        </button>
      </div>
      
      <div className={styles.content}>
        <div className={styles.formContainer}>
          <Form
            form={form}
            onFinish={onFinish}
            onValuesChange={validateForm}
          >
            <Form.Item name='old_pwd' noStyle>
              <div className={styles.fieldGroup}>
                <label className={styles.label}>当前密码</label>
                <div className={styles.inputWrapper}>
                  <Input
                    className={styles.input}
                    placeholder='输入当前密码'
                    type={passWorldVisible ? 'text' : 'password'}
                    onChange={validateForm}
                  />
                  <div className={styles.eyeIcon} onClick={() => setPassWorldVisible(!passWorldVisible)}>
                    {!passWorldVisible ? <EyeInvisibleOutline /> : <EyeOutline />}
                  </div>
                </div>
              </div>
            </Form.Item>

            <Form.Item name='new_pwd' noStyle>
              <div className={styles.fieldGroup}>
                <label className={styles.label}>新密码</label>
                <div className={styles.inputWrapper}>
                  <Input
                    className={styles.input}
                    placeholder='至少 8 位，包含字母与数字'
                    type={visible ? 'text' : 'password'}
                    onChange={validateForm}
                  />
                  <div className={styles.eyeIcon} onClick={() => setVisible(!visible)}>
                    {!visible ? <EyeInvisibleOutline /> : <EyeOutline />}
                  </div>
                </div>
              </div>
            </Form.Item>

            <Form.Item name='confirm_new_pwd' noStyle>
              <div className={styles.fieldGroup}>
                <label className={styles.label}>确认新密码</label>
                <div className={styles.inputWrapper}>
                  <Input
                    className={styles.input}
                    placeholder='再次输入新密码'
                    type={confirmPassWordVisible ? 'text' : 'password'}
                    onChange={validateForm}
                  />
                  <div className={styles.eyeIcon} onClick={() => setConfirmPassWordVisible(!confirmPassWordVisible)}>
                    {!confirmPassWordVisible ? <EyeInvisibleOutline /> : <EyeOutline />}
                  </div>
                </div>
              </div>
            </Form.Item>
          </Form>
          
          <p className={styles.tipText}>{validationMessage}</p>
        </div>
      </div>
    </div>
  );
};

export default Login;
